<div [style.height]="height">
  <img *ngIf='isIcon && !nullIcon' src="{{element.iconUrl}}" [attr.width]="width" [attr.height]="height" />
  <svg *ngIf='isIcon && nullIcon' [attr.width]="width" [attr.height]="height" version="1.1" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
    <path d="m20 3c-9.3882 0-17 7.6117-17 17s7.6118 17 17 17c9.3883 0 17-7.6118 17-17s-7.6118-17-17-17zm12.75 17c0 2.7483-0.884 5.2912-2.3687 7.3766l-17.758-17.758c2.0853-1.4847 4.6282-2.3687 7.3766-2.3687 7.0295 0 12.75 5.7205 12.75 12.75zm-25.5 0c0-2.7483 0.884-5.2912 2.3687-7.3766l17.757 17.756c-2.0839 1.4861-4.6268 2.3701-7.3752 2.3701-7.0295 0-12.75-5.7205-12.75-12.75z"/>
  </svg>
  <svg *ngIf='isLiquid' [attr.width]="width" [attr.height]="height" version="1.1" viewBox="0 0 10.583 10.583" xmlns="http://www.w3.org/2000/svg">
    <path id="shadow" d="m0.49609 9.4456c0 1.0508 9.6384 1.0522 9.6384 0s-9.6384-1.0508-9.6384 0z" fill="#b2b2b2"/>
    <path d="m5.0736 3.3572s-1.7657 2.072-1.9789 3.281c-0.25312 1.6838 0.83587 2.9602 2.1567 2.8028 0.41257-0.0491 1.189-0.41007 1.4632-0.91583 0.4637-0.85522 0.32789-1.763 0.027919-2.7069-0.43236-1.3606-1.6689-2.4612-1.6689-2.4612z"/>
    <path d="m7.4084 0.92822s-1.1907 1.989-1.0941 3.0402c0.075785 0.82455 0.64768 1.6637 1.3698 1.6788 0.73295 0.0153 1.1683-0.65527 1.2597-1.2634 0.22463-1.4936-1.5354-3.4555-1.5354-3.4555z"/>
    <path d="m3.8743 0.2008s-0.34071 0.34693-0.6378 0.85734c-0.28909 0.49667-0.48775 1.1625-0.47251 1.6231 0.020957 0.63334 0.51128 1.2895 1.1339 1.2698 0.68489-0.0217 0.91593-0.97502 0.95085-1.6064 0.022233-0.40199-0.073019-0.84476-0.25048-1.1948-0.28764-0.56744-0.72399-0.949-0.72399-0.949z"/>
    <g [attr.fill]="tint">
      <path d="m5.0698 4.0686s-1.5043 1.8106-1.3948 2.9901c0.091921 0.99026 0.66896 1.9455 1.47 1.9126 0.77716-0.0319 1.3343-0.77242 1.4199-1.5869 0.18073-1.7209-1.495-3.3158-1.495-3.3158z"/>
      <path d="m7.4414 1.4765s-0.92241 1.6542-0.78864 2.4701c0.08702 0.53076 0.50243 1.3303 1.0403 1.3285 0.51584-2e-3 0.80045-0.68858 0.85939-1.2729 0.088749-0.8799-1.111-2.5257-1.111-2.5257z"/>
      <path d="m3.8802 0.62602s-0.82881 1.1188-0.81501 1.7245c0.00955 0.41909 0.29556 1.1345 0.71461 1.1457 0.40276 0.0108 0.73493-0.70929 0.68508-1.2225-0.023507-0.24205-0.06028-0.53715-0.15715-0.7988-0.17136-0.46282-0.42753-0.84894-0.42753-0.84894z"/>
    </g>
  </svg>
  <svg *ngIf='isGas' [attr.width]="width" [attr.height]="height" version="1.1" viewBox="0 0 10.583 10.583" xmlns="http://www.w3.org/2000/svg">
    <path id="shadow" d="m0.49609 9.4456c0 1.0508 9.6384 1.0522 9.6384 0s-9.6384-1.0508-9.6384 0z" fill="#b2b2b2"/>
    <g>
      <ellipse cx="7.3583" cy="4.9309" rx="1.2946" ry="1.365"/>
      <ellipse cx="5.9071" cy="2.2854" rx="1.0043" ry=".98497"/>
      <ellipse cx="3.8138" cy="2.1242" rx=".6036" ry=".58727"/>
      <ellipse cx="4.7341" cy=".7652" rx=".53416" ry=".56603"/>
      <ellipse cx="2.4948" cy="6.5488" rx=".50284" ry=".52844"/>
      <ellipse cx="6.6263" cy="7.5241" rx=".62086" ry=".67018"/>
      <ellipse cx="5.4629" cy="9.222" rx=".48502" ry=".49596"/>
    </g>
    <g [attr.fill]="tint">
      <ellipse cx="2.5057" cy="6.571" rx=".30485" ry=".27814"/>
      <ellipse cx="6.6024" cy="7.4889" rx=".36332" ry=".3909"/>
      <ellipse cx="7.375" cy="4.9957" rx=".83939" ry=".91708"/>
      <ellipse cx="5.9133" cy="2.3022" rx=".63059" ry=".58717"/>
      <ellipse cx="3.8545" cy="2.1268" rx=".32573" ry=".34496"/>
      <ellipse cx="4.7607" cy=".76535" rx=".30485" ry=".2865"/>
    </g>
    <g>
      <ellipse cx="4.8471" cy="5.1217" rx="2.1131" ry="2.0103"/>
      <ellipse cx="4.8234" cy="5.0876" rx="1.6328" ry="1.5676" [attr.fill]="tint"/>
      <ellipse cx="4.3849" cy="7.7494" rx="1.2946" ry="1.3207"/>
      <ellipse cx="4.3807" cy="7.7102" rx=".92709" ry=".91291" [attr.fill]="tint"/>
      <ellipse cx="5.4498" cy="9.2198" rx=".27145" ry=".28441" [attr.fill]="tint"/>
    </g>
  </svg>
</div>